Scale
Allow users to see the status or progress of an item on a clear, linear 3- or 4-step scale
#Examples
The Scale component visually communicates the relative status or progress of an item using a linear sequence of steps. Use it to quickly convey information where precise values are not needed.
#Variations
The component can appear with either 3 or 4 steps. The default is 4 steps. The variant is controlled by the optional length parameter.
#Basic Usage
The Scale component helps users quickly assess a value within a defined range (e.g., task difficulties, severity, priority).
<Scale value={1} />
<Scale value={2} />
<Scale value={3} />
<Scale value={4} />#Warm Color Range
Use a progression of warm colors (i.e., green to orange to red) to convey increasing intensity or urgency.
<Scale colorRange="warm" value={1} />
<Scale colorRange="warm" value={2} />
<Scale colorRange="warm" value={3} />
<Scale colorRange="warm" value={4} />#Reverse Color Range
Reverse the cool or warm color range (e.g., red to orange to green) for situations where higher values are more negative.
<Scale reverseColorRange value={1} />
<Scale reverseColorRange value={2} />
<Scale reverseColorRange value={3} />
<Scale reverseColorRange value={4} />#Monochrome
Use a single color derived from the Heatrange warm/cold design tokens, with varying saturation and value to visually indicate progression.
<Scale colorRange="warm" monochrome value={1} />
<Scale colorRange="warm" monochrome value={2} />
<Scale colorRange="warm" monochrome value={3} />
<Scale colorRange="warm" monochrome value={4} />#Monochrome Reverse
Reverse the monochrome progression for alternative scenarios.
<Scale monochrome reverseColorRange value={1} />
<Scale monochrome reverseColorRange value={2} />
<Scale monochrome reverseColorRange value={3} />
<Scale monochrome reverseColorRange value={4} />#Shape Options
- Circles: Familiar and friendly, best for discrete steps and conveying a softer aesthetic.
- Round square: A balanced choice combining the approachability of circles with a more structured feel.
- Sharp square: Project a technical and precise look, ideal for data-driven contexts and formal interfaces.
<Scale shape="circle" value={2} />
<Scale shape="soft" value={2} />
<Scale shape="square" value={2} />#3-step variant
- All customization options for the 4-step scale apply to the 3-step variant.
- Consider this variant when a more simplified representation is suitable.
<Scale length={3} value={1} />
<Scale length={3} value={2} />
<Scale length={3} value={3} />
<Scale length={3} value={1} colorRange="warm" />
<Scale length={3} value={2} colorRange="warm" />
<Scale length={3} value={3} colorRange="warm" />#Properties
| Property | Description | Defined | Value |
|---|---|---|---|
valueRequired | 1 | 2 | 3 | 4 | ||
lengthOptional | 3 | 4 | ||
colorRangeOptional | "cool" | "warm" | ||
monochromeOptional | booleanSame color for all levels depending on the value | ||
reverseColorRangeOptional | boolean | ||
shapeOptional | "circle" | "soft" | "square" | ||
aria-labelOptional | string | ||
data-observe-keyOptional | stringUnique string, used by external script e.g. for event tracking | ||
tabIndexOptional | numberTab index of the outermost HTML element of the component | ||
onKeyDownOptional | functionCallback for onKeyDown event | ||
onMouseDownOptional | functionCallback for onMouseDown event | ||
onMouseEnterOptional | functionCallback for onMouseEnter event | ||
onMouseLeaveOptional | functionCallback for onMouseLeave event | ||
onFocusOptional | functionCallback for onFocus event | ||
onBlurOptional | functionCallback for onBlur event | ||
classNameOptional | stringCustom className that's applied to the outermost element (only intended for special cases) | ||
styleOptional | objectStyle object to apply custom inline styles (only intended for special cases) |
#Guidelines
#Best practices
#Do not use when
#Accessibility
Explore detailed guidelines for this component: Accessibility Specifications